<template>
	<view class="repair-wrap">
		<view class="nav_item" >
			<view style="margin-top: 10px;"  >
				<view class="repair-box u-p-40 u-p-l-30 u-p-r-30" >
					<checkbox-group @change="checkboxChange">
					 	<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in items" :key="item.value">
					 		
					 		<view style="font-size: 15px;padding: 10px;">{{item.name}}</view>
										<view style="float: right;margin-top: -32px;">
											<checkbox :value="item.value" style="transform:scale(0.8)" :checked="item.checked" />
										</view>
					 	</label>
					 </checkbox-group>
					 
				</view>
				<view class="u-p-l-30 u-m-t-20 repair-box" v-if="refundForm.renovate_refund_way == 1">
					<view class="repair-titel u-m-b-20">
						<view><h3>上传凭证</h3></view>
					</view>
					<view class="guarn-box guarn-box2 u-m-t-20" v-if="refundForm.refund_way" style="margin-left: 38px;">
						<view class="guarn-box2-img">
							<image :src="refundForm.refund_way"></image>
							<u-icon @click="colseImg(refundForm.refund_way)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
					<view class="guarn-box u-m-t-20" v-show="!refundForm.refund_way" >
						<view @click="uoloadHouse" class="guarn-box-img">
							<image  class="u-m-t-72" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/camera.svg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="u-m-t-20 repair-box" style="padding: 15px 30px;">
					<view class="repair-titel u-m-b-20">
						<view><h3>备注</h3></view>
					</view>
					<view class='guar-text' style="background-color: #EEEEEEFF;border-radius: 10px;">
						<textarea maxlength='-1' v-model="refundForm.renovate_refund_remarks"  type="textarea" placeholder="    请输入备注" />
					</view>
					
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;padding: 32px 0;">
				<button type="default" style="width: 40%;border-radius: 78px;color: green;border: 1px solid green;">取消</button>
				<button type="default" style="width: 40%;border-radius: 78px;color: red;border: 1px solid red;" @click="getupdateFail">确定</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			 
			return {
				refundForm: {
					refund_way: '',
					renovate_refund_way: '1',
					renovate_refund_remarks: ''
				},
				userId: null,
				updateData:{},
				id: null,
				items: [{
						value: '1',
						name: '微信',
						checked:false,
					},
					{
						value: '2',
						name: '支付宝',
						checked:false,
					},
					{
						value: '3',
						name: '转账',
						checked:false,
					}
				],
			}
		},
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.userObj = item
			console.log(this.userObj)
			
		},
		
		onShow() {
			// this.getupdateFail()
		},
		methods: {
			checkboxChange: function (e) {
				this.refundForm.renovate_refund_way = e.detail.value;
			},
			//获取施工人员
			async getupdateFail(){
				//校验是否选择违规类型 数组长度大于0表示有选择
				if(this.refundForm.renovate_refund_way.length>0){
					//数组类型转换字符串 覆盖原来的值
					this.refundForm.renovate_refund_way = this.refundForm.renovate_refund_way.toString();
				}
				let res = this.$request.api.updateFail({
					id: this.userObj.id,
					// user_id: this.userId,
					renovate_refund_way: this.refundForm.renovate_refund_way,
					refund_way: this.refundForm.refund_way,
					renovate_refund_remarks: this.refundForm.renovate_refund_remarks
				}).then(res=>{
					uni.showModal({
					    title: '提示',
					    content: '您已提交该装修申请的退款申！',
					    success: function (res) {
					        uni.reLaunch({//跳转页面
					        	url:"/privateMsg/renovation/renovationdetails2"
					        })
					    }
					});
				})
			},
			//营业执照
			colseImg(val){
					this.refundForm.refund_way = null;
					if(!this.refundForm.refund_way){
						this.imgFlag=true
					}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.refundForm.refund_way = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.refundForm.refund_way = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							});
						}
					},
					fail: function(res) {}
				});
			},
			
		}
	}
</script>


<style lang="scss">
	.input {
		width: 400rpx;
		text-align: left;
		line-height: 200%;
		.tab-type {
			width: 254rpx;
			height: 64rpx;
			border-radius: 6rpx 0rpx 0rpx 6rpx;
			border: 2rpx solid #578ef0;
			display: flex;
			align-items: center;
			justify-content: center;
			.shi {
				width: 126rpx;
				height: 60rpx;
				background: #4a90e2;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
			}
			.fou {
				width: 126rpx;
				height: 60rpx;
				background: #ffffff;
				text-align: center;
				line-height: 60rpx;
				color: #4a90e2;
			}
		}
	}
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.tab_nav{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #427705 ;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #427705 ;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.button{
		height: 40px;
		line-height: 40px;
		width: 34%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
	}
	.button1{
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		border: 1px solid #417505;
		color: #FFFFFF;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
	}
	// .button:hover{
	// 	border: 1px solid rgba(69, 124, 5, 0.1);
	// 	color: #447A05;
	// 	background:rgba(69, 124, 5, 0.1);
	// }
	.header-form{
		margin-top: 60rpx;
		background: #FFFFFF;
		.header-li{
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom:1rpx solid #EEEEEE;
			.header-name{
				width: 200rpx;
			}
			.text-area{
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}
	.guarn-box {
		width: 100%;
		height: 216rpx;
		
	}
	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
		margin-left: 72rpx;
	}
	
	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}
	
	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.foot_item{
		margin-top: 40rpx;
		height: 280rpx;
	}
	.button2{
		width: 40%;
		height: 30%;
		float: left;
		margin-left: 33px;
		color: #427705;
		border: 1px solid #427705;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}
	.button_in{
		width: 40%;
		height: 31%;
		float: right;
		color: #427705;
		background-color: rgba(69, 124, 5, 0.1);
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
	.button_renovation{
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}
	.footers{
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position:fixed;
		bottom:0px;
		left:0px;
	}
	.footer{
		width: 95%;
		margin: 40rpx 20rpx;
		// position:fixed;
		// bottom:0px;
		// left:0px;
	}
	.footer-btn{
		// display: flex;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
	.details{
		color: #FFFFFF;
	
	}
	.button5{
		position: relative;
		// left: 264rpx;
		top: -46rpx;
	}
	.payment{
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}
	.payment_img{
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}
	// .payment:hover{
	// 	border: 1px solid #F9A832;
	// 	 cursor : hand;
	// }
	.modal-bg {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.modal-cont {
		// height: 266rpx;
		background: #ffffff;
		// box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx 24rpx 0px 0rpx;
		position: fixed;
		height: 380rpx;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		overflow-x: hidden;
	}
	
		.modal-text {
			// font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid #e6e9ed;
		}
	
		.modal-cancel {
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #578ef0;
		}
		.guarn-box2 {
			display: flex;
		}
		
		.guarn-box2-img {
			width: 216rpx;
			height: 216rpx;
			margin-right: 20rpx;
			position: relative;
		
			.guarn-box2-img-close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}
		
		.guarn-box2 image {
			width: 216rpx;
			height: 216rpx;
		}
</style>
